<template>
	<div>
		<el-switch v-model="value1" active-text="按月付费" inactive-text="按年付费"> </el-switch>
		<el-form
			:model="formData10"
			ref="form10"
			:rules="rules2"
			label-width="80px"
			:inline="false"
			size="normal"
		>
			<el-form-item label="测试1" prop="input1">
				<el-input v-model="formData10.input1"></el-input>
			</el-form-item>
			<el-form-item label="测试2" prop="input2">
				<el-input v-model="formData10.input2"></el-input>
			</el-form-item>
		</el-form>
		<el-form
			:model="formData11"
			ref="form11"
			:rules="rules2"
			label-width="80px"
			:inline="false"
			size="normal"
		>
			<el-form-item label="测试1" prop="input1">
				<el-input v-model="formData11.input1"></el-input>
			</el-form-item>
			<el-form-item label="测试2" prop="input2">
				<el-input v-model="formData11.input2"></el-input>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="onSubmit">立即创建</el-button>
				<el-button>取消</el-button>
			</el-form-item>
		</el-form>
		<!-- <el-form
      ref="form2"
      :model="formData2"
      :rules="rules2"
      label-width="80px"
      :inline="false"
      size="small"
    >
      <el-form-item label="表单2-1" prop="input1">
        <el-input v-model="formData2.input1"></el-input>
      </el-form-item>
      <el-form-item label="表单2-2" prop="input2">
        <el-input v-model="formData2.input2"></el-input>
      </el-form-item>
    </el-form> -->

		<!-- <el-form :model="formData1" ref="form1" :rules="rules1" label-width="80px">
      <el-form-item label="姓名" prop="type">
        <el-input v-model="formData1.type"></el-input>
      </el-form-item>
      <el-form-item label="有效期限" prop="aaa">
        <el-date-picker
          v-model="formData1.aaa"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          placeholder="请选择时间"
          size="mini"
          value-format="timestamp"
          style="width: 400px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form> -->

		<!--stripe-->
		<el-table ref="ctTable" :data="tableData" row-key="id" highlight-current-row border>
			<el-table-column v-for="(col, i) in columns" :key="i" :prop="col.name" :label="col.label">
			</el-table-column>
		</el-table>
		<hr />
		<pre style="text-align: left">
      {{ tableData }}
    </pre>
	</div>
</template>

<script>
	import Sortable from 'sortablejs'
	export default {
		data() {
			return {
				formData10: {},
				formData11: {},
				value1: false,
				tableObject: {},
				formData1: {},
				forma: {},
				rules1: {
					type: [{ required: true, message: '请选择类型', trigger: 'change' }],
					aaa: [{ required: true, message: '请选择类型', trigger: 'change' }]
				},
				formData2: {},
				rules2: {
					input1: [{ required: true, message: '请选择类型', trigger: 'change' }],
					input2: [{ required: true, message: '请选择类型', trigger: 'change' }]
				},
				columns: [
					{ label: '序号', name: 'id' },
					{ label: '日期', name: 'date' },
					{ label: '姓名', name: 'name' },
					{ label: '地址', name: 'address' }
				],
				tableData: [
					{
						id: '1',
						date: '2016-05-01',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1518 弄'
					},
					{
						id: '2',
						date: '2016-05-02',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1517 弄'
					},
					{
						id: '3',
						date: '2016-05-03',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1519 弄'
					},
					{
						id: '4',
						date: '2016-05-04',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1516 弄'
					}
				]
			}
		},
		// mounted() {
		//   this.rowDrop()
		// },
		watch: {
			value1: {
				handler(val) {
					if (val) {
						this.rowDrop()
					} else {
						this.tableObject.destroy()
					}
				},
				immediate: false
			}
		},
		methods: {
			onSubmit() {
				this.$refs['form10'].validate(valide => {
					console.log(valide)
				})
			},
			rowDrop() {
				const tbody = document.querySelector('.el-table__body-wrapper tbody')
				this.tableObject = Sortable.create(tbody, {
					onEnd: ({ newIndex, oldIndex }) => {
						// 获取当前节点的数据
						let currRow = this.tableData.splice(oldIndex, 1)[0]
						// 替换到新节点上
						this.tableData.splice(newIndex, 0, currRow)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	:deep(.el_table) {
		width: 600px;
	}
</style>
